<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加来访人员</title>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/modernizr.min.js}"></script>
</head>
<body>
<!--增加框-->
<div class="container">

    <div class="row">
        <!-- Widget Item -->
        <div class="col-md-12">
            <div class="widget-area-2 lochana-box-shadow">
                <h3 class="widget-title">添加来访人员</h3>
                <form action="/visitor/addVisitor" method="post">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="visName"><span style="color: red">*</span>来访人姓名</label>
                            <input type="text" class="form-control" placeholder="visName" id="visName"
                                   name="visName">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="visHost"><span style="color: red">*</span>被访人姓名</label>
                            <input type="text" class="form-control" placeholder="visHost" id="visHost"
                                   name="visHost">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dorId">寝室号</label>
                            <input type="text" class="form-control" placeholder="dorId" id="dorId"
                                   name="dorId">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="relation">关系</label>
                            <input type="text" class="form-control" placeholder="relation" id="relation"
                                   name="relation">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="visCred">证件名称</label>
                            <input type="text" class="form-control" placeholder="visCred" id="visCred"
                                   name="visCred" >
                        </div>
                        <div class="form-group col-md-6">
                            <label for="number"><span style="color: red">*</span>证件编号</label>
                            <input type="text" class="form-control" placeholder="number" id="number"
                                   name="number">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="telephone">联系方式</label>
                            <input type="text" placeholder="telephone" class="form-control"
                                   id="telephone" name="telephone" onchange="queryNum1()">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="visDes">备注</label>
                            <input type="text" placeholder="visDes" class="form-control"
                                   id="visDes" name="visDes">
                        </div>
                        <div class="form-group col-md-6">
                            <button type="submit" class="btn btn-primary btn-lg" id="submit">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>

<script th:inline="javascript">
    /*验证提交信息，某些不能为空*/
    $("#submit").click(function () {
        var visName = $("#visName").val();
        var visHost = $("#visHost").val();
        var number = $("#number").val();
        if (visName.length == 0) {
            alert("姓名不能空，请重新输入！")
            return false;
        } else if (visHost.length == 0) {
            alert("被访人姓名不能空，请重新输入！")
            return false;
        } else if (number.length == 0) {
            alert("证件编号不能空，请重新输入！")
            return false;
        } else {
            return true;
        }
    })


    /*判断是否电话号码 */
    function queryNum1() {
        var tel = document.getElementById('telephone').value;
        var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/; //校验手机号和固定电话
        var gu = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
        if (!reg.test(tel) || !gu.test(tel)) {
            alert("请输入正确的手机号");
            return false;
        }else {
            return true;
        }

    }



    /*身份证验证*/
    function queryNum3() {
        var idCard = document.getElementById('varchar').value;
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(idCard)){
            return true;
        }else {
            alert("身份证格式不正确")
            return false;
        }
    }
</script>


</body>
</html>